import React, { useState, useEffect, useContext } from "react";
import { View, StyleSheet, Dimensions, Text, Image } from "react-native";
import { getTransactionAmount } from "@/utils/util";
import CommonContext from "@/utils/createContext";
import { PayWithArray } from '@/config/config'

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const TransferDetail = () => {

    const { transcationDetail, isSignFinish } = useContext(CommonContext);
    const [amountData, setAmountData] = useState({});

    useEffect(() => {
        if (transcationDetail && transcationDetail.txId) {
            //获取交易金额信息
            let obj = getTransactionAmount(transcationDetail.txInfo)
            obj.logoUri = obj.logoUri?.replace('/media/https%3A', 'https:/')
            setAmountData(obj)
        }
    }, [transcationDetail]);

    return (
        <View>
            <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 20 * ratio }}>
                <Image source={{ uri: amountData.logoUri }} style={{ width: 30 * ratio, height: 30 * ratio }} />
                <Text style={styles.title1}>{amountData.directionSign} {amountData.amountWithSymbol}</Text>
            </View>
            <Image source={require('@/assets/safe/arrow_down.png')} style={{ width: 10 * ratio, height: 16 * ratio, marginLeft: 30 * ratio, marginTop: 7 * ratio }} />
            <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 15 * ratio, marginTop: 9 * ratio }}>
                <Image source={PayWithArray['profile_logo1']} style={{ width: 40 * ratio, height: 40 * ratio }} />
                <View style={{ marginLeft: 9 * ratio, justifyContent: 'center' }}>
                    {/* <Text style={styles.title1}>{transcationDetail.label}</Text> */}
                    <Text ellipsizeMode="middle" numberOfLines={1}
                        style={styles.title3}>
                        {transcationDetail.txInfo?.recipient?.value}
                    </Text>
                </View>
            </View>
            <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 15 * ratio, marginTop: 18 * ratio }}>
                <Image source={require('@/assets/safe/arrow_right_up.png')} style={{ width: 17 * ratio, height: 17 * ratio }} />
                <Text style={styles.title2}>Outgoing transfer</Text>
                {isSignFinish && <Text style={{ ...styles.title2, color: '#0069F6' }}>Success</Text>}
            </View>
            {/* 签名完成后隐藏此处内容 */}
            {!isSignFinish && <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 15 * ratio, marginTop: 12 * ratio }}>
                <Image source={require('@/assets/safe/single_dot.png')} style={{ width: 6 * ratio, height: 6 * ratio, marginLeft: 5 * ratio }} />
                <Text style={{ ...styles.title2, color: '#FF000A', marginLeft: 11 * ratio }}>Needs confirmations</Text>
            </View>}
            <View style={{ flexDirection: 'row', marginTop: 17 * ratio }}>
                <View style={styles.signProcess}>
                    <Image source={require('@/assets/safe/plus_blue.png')} style={{ width: 12 * ratio, height: 12 * ratio }} />
                </View>
                <Text style={{ ...styles.title3, color: '#0069F6', lineHeight: 12 }}>Created</Text>
            </View>
            <View style={styles.signProcess}>
                <View style={styles.divider}></View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    title1: {
        fontSize: 16,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#898989',
        lineHeight: 24,
        marginLeft: 14 * ratio
    },
    title2: {
        fontSize: 14,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#2C2C2C',
        lineHeight: 21,
        marginLeft: 6 * ratio
    },
    title3: {
        width: 178 * ratio,
        fontSize: 12,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#898989',
        lineHeight: 18
    },
    divider: {
        width: 1,
        height: 22 * ratio,
        backgroundColor: '#0069F6'
    },
    signProcess: {
        width: 42 * ratio,
        alignItems: 'center'
    }
})
export default TransferDetail